import React from 'react'
import './index.css'

export default class Header extends React.Component {
  handleKeyUp = e => {
    let {key, target} = e
    if (key === 'Enter') {
      if (target.value.trim() === '') {
        alert('请输入内容！')
      } else {
        const todoObj = {id: new Date().getTime(), name: target.value, done: false}
        this.props.handleAddTodo(todoObj)
        target.value = ''
      }
    }
  }

  render() {
    return (
      <div className="todo-header">
        <input type="text" onKeyUp={e => this.handleKeyUp(e)} placeholder="请输入任务名称，按回车键确认"/>
      </div>
    )
  }
}
